<template>
  <div id="lunbo">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(v, i) in arra" :key="i"
        ><img class="swi-img" :src="v"/></van-swipe-item>
    </van-swipe>
    <van-search  placeholder="粉底" />
    <div id="fuwu">
      <span ><van-icon name="good-job" /> 正品保证</span>
      <span ><van-icon name="vip-card" /> 会员特权</span>
      <span > <van-icon name="diamond" />专享服务</span>
    </div>
  </div>
</template>

<script>
import getlink from "@/apis/getapi.js";
export default {
  data() {
    return {
      arr: "",
    };
  },
  computed:{
   arra() {
      return this.arr.slice(0, 3);
    },
  },
  mounted() {
    getlink("/data/list/lists").then((ok) => {
      console.log(ok.data.data);
      this.arr =ok.data.swiper;
    });
  },
  
};
</script>

<style scoped>
#lunbo {
  width: 100%;
  height: 2.5rem;
  background-color: rgb(248, 247, 247);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#fuwu {
  align-self: center;
  display: flex;
  flex-direction: row;
  height: 0.4rem;
  line-height: 0.4rem;
  width: 3rem;
  background-color: white;
  justify-content: space-around;
  border-radius: 0 0 0.15rem 0.15rem;
  font-size: 0.16rem;
  color: gray;
}
.my-swipe {
  color: #fff;

  height: 1.6rem;
  font-size: 20px;
  line-height: 1.5rem;
  text-align: center;
  background-color: #39a9ed;
}
.swi-img {
  width: 100%;
  height: 1.6rem;
}
</style>